<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">


            <el-col :span="6">
                <el-form-item label="客户名称:" prop="customerName">
                    <el-input maxlength="30" v-model="queryParams.customerName" clearable
                              placeholder="请输入客户名称"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="线索来源:" prop="cluesSourceCode">
                    <el-select filterable v-model="queryParams.cluesSourceCode" clearable>
                        <template v-for="dict in dict.type.clues_source">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="意向情况:" prop="cluesIntentionCode">
                    <el-select filterable v-model="queryParams.cluesIntentionCode" clearable>
                        <template v-for="dict in dict.type.clues_intention">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="客户属性:" prop="customerPropertyCode">
                    <el-select filterable v-model="queryParams.customerPropertyCode" clearable>
                        <template v-for="dict in dict.type.customer_property">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="线索状态:" prop="cluesStatusCode">
                    <el-select filterable v-model="queryParams.cluesStatusCode" clearable>
                        <template v-for="dict in dict.type.clues_status">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="业务范围:" prop="businessScopeCode">
                    <el-select filterable v-model="queryParams.businessScopeCode" clearable>
                        <template v-for="dict in dict.type.business_scope">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>


        </SearchContent>

        <div class="card-wrap card-padding">
            <div class="table-title-wrap justify-end">
                <el-button type="primary" size="mini" @click="handleAdd"
                           v-hasPermi="['memberClue:clueList:add']">新增
                </el-button>
                <el-button type="success" size="mini" @click="handleExport"
                           v-hasPermi="['memberClue:clueList:export']">导出
                </el-button>
            </div>

            <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" min-width="170" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <e-button size="mini" type="text" @click="goFollow(scope.row)"
                                      v-hasPermi="['memberClue:clueList:follow']">跟进
                            </e-button>
                            <e-button size="mini" type="text" @click="handleTransfer(scope.row)"
                                      v-hasPermi="['memberClue:clueList:transfer']">转移
                            </e-button>
                            <e-button size="mini" type="text" @click="handleUpdate(scope.row)"
                                      v-hasPermi="['memberClue:clueList:edit']">编辑
                            </e-button>
                            <e-button size="mini" type="text" @click="handleDelete(scope.row)"
                                      v-hasPermi="['memberClue:clueList:delete']">删除
                            </e-button>
                            <e-button size="mini" type="text" @click="handleDetail(scope.row)"
                                      v-hasPermi="['clues:clues:query']">查看
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column show-overflow-tooltip label="业务范围" align="center" prop="businessScopeCode">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.business_scope"
                                :value="scope.row.businessScopeCode"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="线索来源" align="center" prop="cluesSourceCode">
                        <template slot-scope="scope">
                            {{scope.row.cluesSource|filterNull}}
<!--                            <dict-tag-->
<!--                                :options="dict.type.clues_source"-->
<!--                                :value="scope.row.cluesSourceCode"-->
<!--                            />-->
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="线索状态" align="center" prop="cluesStatusCode">
                        <template slot-scope="scope">
                            {{scope.row.cluesStatus|filterNull}}
<!--                            <dict-tag-->
<!--                                :options="dict.type.clues_status"-->
<!--                                :value="scope.row.cluesStatusCode"-->
<!--                            />-->
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="客户名称" align="center" prop="customerName"/>
                    <el-table-column show-overflow-tooltip label="客户属性" align="center" prop="customerPropertyCode">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.customer_property"
                                :value="scope.row.customerPropertyCode"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="意向情况" align="center" prop="cluesIntentionCode">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.clues_intention"
                                :value="scope.row.cluesIntentionCode"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="最后跟进时间" min-width="150" align="center" prop="lastFollowTime"/>
                    <el-table-column show-overflow-tooltip label="跟进人" align="center" prop="followerNames"/>
                </template>
            </table-page>

        </div>


        <!-- 添加或修改测试单表对话框 -->
        <el-dialog :title="title" :visible.sync="open" append-to-body width="45%">
            <el-form ref="form" :rules="rules" :model="form" label-width="120px">

                <el-row>
                    <el-col :span="20">

                        <el-form-item label="选择组织:" prop="deptLabel">
                            <el-select ref="deptselect" @click.native="deptClick" v-model="form.deptLabel"
                                       style="width: 100%">

                            </el-select>
                        </el-form-item>

                    </el-col>

                    <el-col :span="20">

                        <el-form-item label="转移对象名称:" prop="followerIds">

                            <el-select filterable v-model="form.followerIds" clearable multiple style="width: 100%">
                                <template v-for="(item) in userList">
                                    <el-option :label="item.userName" :value="item.userId"
                                               :key="item.userId"></el-option>
                                </template>
                            </el-select>

                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="备注:" prop="transferMemo">

                            <el-input v-model="form.transferMemo"
                                      type="textarea" maxlength="500"
                                      :rows="2"
                                      clearable placeholder="请输入备注"></el-input>

                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="cancel">{{ isNew ? '取消' : '关闭' }}</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm" v-if="isNew">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog
            title="选择组织"
            :visible.sync="dialogVisible"
            width="35%">
            <div class="head-container">
                <el-tree
                    :data="deptOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    node-key="id"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                />
            </div>
        </el-dialog>

    </div>
</template>

<script>
// import { getModelData} from "@/api/zcwh/vehicleModelApi";
// import { getToken } from "@/utils/auth";
// import EInput from "../../components/from_table/EInput.vue";
// import ESelect from "../../components/from_table/ESelect.vue";
// import SearchMixin from '@/mixin/index';
import SearchContent from "@/components/SearchContent/index.vue";
import {delModel} from "@/api/zcwh/vehicleModelApi";
import {cluesDelete, cluesList, cluesTransferRecordAdd} from "@/api/memberManage/clueList";
import {deptTreeSelect, listUser} from "@/api/system/user";

export default {
    name: "ClueList",
    components: {
        // 'e-input': EInput,
        SearchContent
        // 'e-select': ESelect,
    },
    dicts: ['clues_source', 'clues_intention', 'customer_property', 'clues_status', 'business_scope'],
    // mixins:[SearchMixin],
    data() {
        return {
            dialogVisible: false,
            deptOptions: null,
            defaultProps: {
                children: "children",
                label: "label"
            },

            //按钮loading
            buttonLoading: false,
            // 遮罩层
            loading: true,
            isNew: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                customerName: null,
                cluesSourceCode: null,
                cluesIntentionCode: null,
                customerPropertyCode: null,
                cluesStatusCode: null,
                businessScopeCode: null,
            },

            total: 0,
            dataList: [],
            userList: [],
            selCluesId: '',
            // 表单参数
            form: {
                followerIds: null,
                transferMemo: null,
                deptLabel: '',
                deptId: '',
            },
            // 表单校验
            rules: {
                followerIds: [
                    {required: true, message: "转移对象不能为空", trigger: "blur"}
                ],
            }
        };
    },
    created() {
        this.getList()
        this.getDeptTree()
        // this.getUserList()
    },
    activated() {
        this.getList()
        this.getDeptTree()
    },
    methods: {
        /** 查询测试单表列表 */
        getList() {
            this.loading = true;


            cluesList(this.queryParams).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.dataList = rows
                    this.total = total
                    this.loading = false;
                }

            });
        },

        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        /** 查询组织下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },
        // 节点单击事件
        handleNodeClick(data) {
            console.log('data', data)

            this.form.deptLabel = data.label
            this.form.deptId = data.id;
            // this.form.followerIds = null;

            this.dialogVisible = false;

            this.getUserList();
        },
        getUserList() {
            listUser({
                pageNum: 1,
                pageSize: 100000,
                deptId: this.form.deptId,
                status:0
            }).then(response => {
                    this.userList = response.rows;
                    // this.total = response.total;
                    // this.loading = false;
                }
            );
        },
        deptClick() {
            this.dialogVisible = true

            this.$refs.deptselect.blur()
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                followerIds: null,
                transferMemo: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                customerName: null,
                cluesSourceCode: null,
                cluesIntentionCode: null,
                customerPropertyCode: null,
                cluesStatusCode: null,
                businessScopeCode: null,
            },
                // this.resetForm("queryForm");
                this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/clues/clues/export', {
                ...this.queryParams
            }, `线索列表.xlsx`)
        },
        /** 新增操作 */
        handleAdd() {
            // this.$router.push({
            this._toPage({
                name: 'clueAdd',
                query: {pageType: '新增线索'}
                // query: {orderNo: row.orderNo}
            })
        },

        /** 转移 */
        handleTransfer(row) {
            this.selCluesId = row.cluesId;
            this.reset();
            this.open = true;
            this.title = "转移";

        },

        handleDetail(row) {
            // this.$router.push({
            this._toPage({
                name: 'clueDetail',
                query: {cluesId: row.cluesId}
            })
        },

        /** 跟进操作 */
        goFollow(row) {
            // this.$router.push({
            this._toPage({
                name: 'clueFollow',
                query: {cluesId: row.cluesId}
            })

        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            // this.$router.push({
            this._toPage({
                name: 'clueAdd',
                query: {cluesId: row.cluesId, pageType: '编辑线索'}
            })
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            this.$modal.confirm('确定删除？').then(() => {
                this.loading = true;
                return cluesDelete(row.cluesId);
            }).then(() => {
                this.loading = false;
                this.handleQuery();
                this.$modal.msgSuccess("删除成功");
            }).finally(() => {
                this.loading = false;
            });
        },

        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.buttonLoading = true;

                    cluesTransferRecordAdd({
                        ...this.form,
                        cluesId: this.selCluesId,
                        cluesFollowerTypeCode: 2
                    }).then(res => {
                        this.buttonLoading = false;
                        this.$modal.msgSuccess("转移成功");
                        this.open = false;
                        this.handleQuery();
                    }).finally(() => {
                        this.buttonLoading = false;
                    });
                }
            });
        },

    }
};
</script>


<style lang="scss" scoped>
.pagination-container {
    padding: 0 20px 50px !important;
}


.form-dialog {
    ::v-deep .el-dialog__header {
        padding: 10px 20px;
        border-bottom: 1px solid #DCDFE6;

        .el-dialog__headerbtn {
            top: 15px;
        }
    }

    .box-card {
        margin-bottom: 20px;

        .card-title {
            font-size: 16px;
            position: relative;
            margin-left: 8px;
            padding: 0;
        }

        .card-title::after {
            content: '';
            width: 4px;
            height: 18px;
            background-color: aqua;
            display: block;
            position: absolute;
            left: -12px;
            top: 2px;
        }
    }

}
</style>
